<template>
    <div class="wrapper">
        <!-- <mg-magnifier
            :link="link"
            :blank="blank"
            :imgUrl="imgUrl"
            :imgWidth="imgWidth"
            :imgHeight="imgHeight"
            :magWidth="magWidth"
            :magHeight="magHeight"
        >
        </mg-magnifier> -->

        <!-- <mg-stars
            v-model="num"
            :size="size"
            @change="handleChange"
        >
        </mg-stars> -->

        <!-- <mg-list-view
            :data="data"
            :temp="settings.temp"
            :column="settings.column"
            :marginX="settings.marginX"
            :margin="settings.margin"
            :del-btn="settings.delBtn"
            :del-btn-custom="handleDelItem"
            @after-content="afterContentInit"
        >
        </mg-list-view>
        <button @click="handleNext(3)">下一页</button> -->

        <mg-dialog
            :visible="true"
            title="模态框"
            :width="350"
            content="欢迎来到mgUI，今天你askform了么？"
            themeBgColor="orange"
            themeColor="#fff"
            cancelBtnText="否"
            confirmBtnText="是"
            :showBtns="true"
            top="center"
            @confirm="btnConfirm"
            @cancel="btnCancel"
        ></mg-dialog>
    </div>
    
</template>
<script>
import { reactive, toRefs } from 'vue'

export default {

    // 模态框
    setup() {

        const btnConfirm = () => {
            console.log('you click btnconfirm !!!');
        }

        const btnCancel = () => {
            console.log('you click btnCancel');
        }

        return {
            btnConfirm,
            btnCancel
        }
    }

    // 列表视图
    // setup() {

    //     let options = reactive({
    //         settings: {},
    //         data: []
    //     })
    //     const handleDelItem = (item, index) => {
    //         console.log(item, index);
    //         options.data.splice(index, 1);
    //         // alert('我删除了拉拉')
    //     }
    //     const afterContentInit = (list) => {
    //         console.log('after', list);
    //         list[1].style.color = 'orange';
    //     }
    //     const getSettingsAPI = () => {
    //         return new Promise((resolve, reject) => {
    //             const response = {
    //                 temp: `
    //                     <div>
    //                         {{ item.name }}
    //                     </div>
    //                     <div style="color: lightblue;">
    //                         {{ item.age }}
    //                     </div>
    //                     <input style="width: 50%;" type="number" v-model="item.age">
    //                     <div
    //                         style="height: 50px;"
    //                     >
    //                         <div
    //                             v-for="tip in item.tips"
    //                             style="font-size: 12px;"
    //                         >
    //                             {{ tip.name }}
    //                         </div>
    //                     </div>
    //                 `,
    //                 column: 3,
    //                 margin: 10,
    //                 marginX: 5,
    //                 delBtn: true
    //             }
    //             setTimeout(() => {
    //                 resolve(response)
    //             }, 600)
    //         })
    //     }
    //     const getDataAPI = (n) => {
    //         return new Promise((resolve, reject) => {
    //             const response = [
    //                 {
    //                     name: '屠呦呦',
    //                     age: 666,
    //                     tips: [
    //                         {
    //                             name: '早上学习',
    //                             detail: '学习嗝屁'
    //                         },
    //                         {
    //                             name: '中午学习',
    //                             detail: '学习个锤子'
    //                         },
    //                         {
    //                             name: '晚上学习',
    //                             detail: '学习个棒槌'
    //                         },
    //                     ]
    //                 },
    //                 {
    //                     name: '张衡',
    //                     age: 6,
    //                     tips: [
    //                         {
    //                             name: '早上学习',
    //                             detail: '学习嗝屁'
    //                         },
    //                         {
    //                             name: '中午学习',
    //                             detail: '学习个锤子'
    //                         },
    //                     ]
    //                 },
    //                 {
    //                     name: '李时珍',
    //                     age: 88,
    //                     tips: [
    //                         {
    //                             name: '早上f学习',
    //                             detail: '学c习嗝屁'
    //                         },
    //                         {
    //                             name: '中gsd午学习',
    //                             detail: '学gs习个锤子'
    //                         },
    //                         {
    //                             name: '晚上gsd学习',
    //                             detail: '学gsd习个棒槌'
    //                         },
    //                     ]
    //                 },
    //                 {
    //                     name: '方文山',
    //                     age: 8,
    //                     tips: []
    //                 },
    //                 {
    //                     name: 'ooo',
    //                     age: 78,
    //                     tips: [
    //                         {
    //                             name: '不学习',
    //                             detail: '学习嗝屁'
    //                         },
    //                         {
    //                             name: '学习',
    //                             detail: '学习个锤子'
    //                         }
    //                     ]
    //                 },
    //             ].slice(0, n || 5)
    //             setTimeout(() => {
    //                 resolve(response)
    //             }, 600)
    //         })
    //     }
    //     const getSettings = () => {
    //         getSettingsAPI().then((response) => {
    //             options.settings = response;
    //         })
    //     }
    //     const getData = (n) => {
    //         getDataAPI(n).then((response) => {
    //             options.data = response;
    //         })
    //     }

    //     const handleNext = (n) => {
    //         getData(n);
    //     }

    //     getSettings();
    //     getData();

    //     return {
    //         ...toRefs(options),
    //         handleDelItem,
    //         afterContentInit,
    //         handleNext,
    //     }
    // }

    // 放大镜
    // setup() {
    //     const state = reactive({
    //         link: "https://www.baidu.com",
    //         blank: true,
    //         imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F014f255bd069b9a801213deac71311.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639639074&t=0270356dd7ae6be983518900f1b2fd36",
    //         imgAlt: '卡卡罗特',
    //         imgWidth: 496,
    //         imgHeight: 374,
    //         magWidth: 100,
    //         magHeight: 100,
    //     })

    //     return {
    //         ...toRefs(state)
    //     }
    // }

    // 评分
    // setup() {

    //     let star = reactive({
    //         num: 3,
    //         size: 20
    //     })

    //     const handleChange = (num) => {
    //         console.log(num);
    //     }

    //     return {
    //         ...toRefs(star),
    //         handleChange
    //     }
    // }
}
</script>
<style lang="scss">
    .wrapper {
        width: 70%;
        margin: 100px auto 0;
    }
</style>